import React, { } from 'react'
import { Button, theme, Layout, Avatar, Space, Dropdown } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, DownOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux'
import { changeCollapse } from '@/store/reducers/main'

const { Header } = Layout;

const items = [
    {
        key: '1',
        label: '修改密码'
    },

    {
        key: '2',
        label: '退出登录',
    },

];

export default function HeaderPage() {
    const dispatch = useDispatch()
    const isCollapse = useSelector((state) => state.main.isCollapse)

    const { token: { colorBgContainer } } = theme.useToken();
    return (
        <Header
            style={{
                padding: 0,
                background: colorBgContainer,
                display: 'flex',
                justifyContent: 'space-between',
                paddingRight: '20px'
            }}
        >
            <Button
                type="text"
                icon={isCollapse ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={() => dispatch(changeCollapse())}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 64,
                }}
            />
            <div>
                <Space wrap size={16}>
                    <Avatar icon={<UserOutlined />} />
                    <Dropdown menu={{ items }}>
                        <span onClick={(e) => e.preventDefault()}>
                            <Space>用户名<DownOutlined /></Space>
                        </span>
                    </Dropdown>
                </Space>
            </div>
        </Header>
    )
}
